import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import router from '@/router'
const request = axios.create({
  // baseURL: '/api',
  // 写成变量，让不同的环境，自动变化
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 6000
})

// 请求拦截器
// 有两个参数，分别是两个回调函数
// 第一个回调函数，是请求成功以后执行的函数
// 第二个回调函数，是请求失败以后执行的函数
request.interceptors.request.use(config => {
  // console.log('请求发送成功回调函数')
  if (store.state.user.token) {
    config.headers.Authorization = `Bearer ${store.state.user.token}`
  }
  return config
}, error => Promise.reject(error))
// 响应拦截器
// 有两个参数，分别是两个回调函数······
// 第一个回调函数，是响应成功以后执行的函数
// 第二个回调函数，是响应失败（401,500...）以后执行的函数
request.interceptors.response.use(response => {
  // console.log('服务器响应成功的回调函数')
  // return response
  // 如果返回的是一个二进制的文件，因为二进制的文件没有success
  if (response.data instanceof Blob) return response.data
  if (response.data.success) {
    // 这个if分支，表示业务成功
    return response.data
  } else {
    // 这个if分支，表示业务失败，应该给用户提示，并且用Promise.reject返回，主要是让我们的业务代码，执行catch里面去
    // 给用户一些使用提示，提示的话，不能使用alert，卡死浏览器，不好，要用element-ui的一些 提示组件
    // console.log('业务报错了')
    // 下面这种代码，是在.vue后缀的文件里面用的，硬因为this必须要是 vue组件实例
    // 而我们这个 .js文件是 不能使用this的，或者说下面this指向的是undefined
    // this.$message('这是一条消息提示')
    Message.error({ message: response.data.message })
    return Promise.reject(response)
  }
}, error => {
  // 判断401报错，一般是token过期
  if (error?.response?.status === 401) {
    store.dispatch('user/logoutAction')
    router.push('/login')
    // Message.error(response.error.data.message)
  }
  Promise.reject(error)
})
export default request
